<template>
  <basic-container>
    <div class="flowBase">
      <div class="fd-nav-content">
        <section class="dingflow-design">
          <!--<el-button-->
            <!--type="danger"-->
            <!--:disabled="messageObj.context == '' ? !issueState : issueState"-->
            <!--:style="{-->
              <!--background: messageObj.context == '' ? '#7E8185' : '#3296fa;'-->
            <!--}"-->
            <!--class="ant-btn button-publish release-btn-lf"-->
            <!--@click="saveSet"-->
            <!--&gt;发布</el-button>-->
          <el-button
            type="button"
            class="ant-btn button-publish release-btn-ri"
            @click="keepBtn"
            >保存</el-button
          >
          <!-- <span></span> -->
          <!-- </button> -->
          <div class="release-btn-name">{{ messageObj.name }}</div>
          <div class="keep-div-flowId">( 流程编号:{{ messageObj.flowId }} )</div>
          <div class="zoom">
            <div
              :class="'zoom-out' + (nowVal == 50 ? ' disabled' : '')"
              @click="zoomSize(1)"
            ></div>
            <span>{{ nowVal }}%</span>
            <div
              :class="'zoom-in' + (nowVal == 300 ? ' disabled' : '')"
              @click="zoomSize(2)"
            ></div>
          </div>
          <div
            class="box-scale"
            id="box-scale"
            :style="
              'transform: scale(' +
                nowVal / 100 +
                '); transform-origin: 50% 0px 0px;'
            "
          >
            <nodeWrap
              :nodeConfig.sync="nodeConfig"
              :flowPermission.sync="flowPermission"
              :isTried.sync="isTried"
              :tableId="tableId"
              :num="num"
            ></nodeWrap>
            <div class="end-node">
              <div class="end-node-circle"></div>
              <div class="end-node-text">流程结束</div>
            </div>
          </div>
        </section>
      </div>
      <errorDialog :visible.sync="tipVisible" :list="tipList" />
      <promoterDrawer />
      <approverDrawer :directorMaxLevel="directorMaxLevel" />
      <copyerDrawer />
      <conditionDrawer />
    </div>
  </basic-container>
</template>
<script>
import { modelSubmit } from '@/api/approve/approve'
import errorDialog from './component/dialog/errorDialog'
import promoterDrawer from './component/drawer/promoterDrawer'
import approverDrawer from './component/drawer/approverDrawer'
import copyerDrawer from './component/drawer/copyerDrawer'
import conditionDrawer from './component/drawer/conditionDrawer'
import JsonObjs from './jsons/data'
export default {
  components: {
    errorDialog,
    promoterDrawer,
    approverDrawer,
    copyerDrawer,
    conditionDrawer
  },
  data () {
    return {
      newJsonObj: false,
      num: 1,
      issueState: false,
      isTried: false,
      tipList: [],
      hierarchyNumber: 0,
      tipVisible: false,
      nowVal: 110,
      processConfig: {},
      nodeConfig: {},
      workFlowDef: {},
      flowPermission: [],
      directorMaxLevel: 0,
      tableId: '',
      messageObj: ''
    }
  },
  created () {},
  computed: {
    orderList () {
      return this.$route.query.key.context
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.targetUser = JSON.parse(to.query.key)
      vm.messageObj = vm.targetUser
      let { context } = vm.targetUser
      if (context) {
        const data = JSON.parse(context)
        vm.processConfig = data
        let {
          nodeConfig,
          flowPermission,
          directorMaxLevel,
          workFlowDef,
          tableId
        } = data
        vm.nodeConfig = nodeConfig
        vm.flowPermission = flowPermission
        vm.directorMaxLevel = directorMaxLevel
        vm.workFlowDef = workFlowDef
        vm.tableId = tableId
      } else {
        const data = JsonObjs
        vm.processConfig = data
        let {
          nodeConfig,
          flowPermission,
          directorMaxLevel,
          workFlowDef,
          tableId
        } = data
        vm.nodeConfig = nodeConfig
        vm.flowPermission = flowPermission
        vm.directorMaxLevel = directorMaxLevel
        vm.workFlowDef = workFlowDef
        vm.tableId = tableId
      }
    })
  },
  methods: {
    reErr ({ childNode }) {
      if (childNode) {
        let { type, error, nodeName, conditionNodes } = childNode
        if (type == 1 || type == 2) {
          if (error) {
            this.tipList.push({
              name: nodeName,
              type: ['', '审核人', '抄送人'][type]
            })
          }
          this.reErr(childNode)
        } else if (type == 3) {
          this.reErr(childNode)
        } else if (type == 4) {
          this.reErr(childNode)
          for (var i = 0; i < conditionNodes.length; i++) {
            if (conditionNodes[i].error) {
              this.tipList.push({
                name: conditionNodes[i].nodeName,
                type: '条件'
              })
            }
            this.reErr(conditionNodes[i])
          }
        }
      } else {
        childNode = null
      }
    },
    //发布
    saveSet () {
      this.processConfig.flowPermission = this.flowPermission
      this.isTried = true
      this.tipList = []
      this.reErr(this.nodeConfig)
      if (this.tipList.length != 0) {
        this.tipVisible = true
        return
      } else {
        this.$message({
          type: 'success',
          message: '发布成功!'
        })
      }
    },

    // mapMoListArr (arr) {
    //   for (var key in arr) {
    //     // if (typeof arr[key] === 'object') {
    //     //   arr['flowIdentifying'] = this.hierarchyNumber++
    //     //   this.mapMoListArr(arr[key])
    //     // }
    //     if (key === 'childNode') {
    //       arr['flowSoleindex'] = this.hierarchyNumber++
    //       this.mapMoListArr(arr[key])
    //     } else {
    //       arr['flowSoleindex'] = this.hierarchyNumber
    //     }
    //   }
    //   return arr
    // },
    //保存
    keepBtn () {
      this.hierarchyNumber = 0
      this.processConfig.flowPermission = this.flowPermission
      console.log(JSON.stringify(this.processConfig))
      let { messageObj } = this
      let data = {
        flowId: messageObj.flowId,
        id: messageObj.id,
        context: JSON.stringify(this.processConfig),
        version: messageObj.version,
        status: messageObj.status,
        remark: messageObj.remark
      }
      this.isTried = true
      this.tipList = []
      this.reErr(this.nodeConfig)
      if (this.tipList.length != 0) {
        this.tipVisible = true
        return
      } else {
        modelSubmit(data).then(res => {})
        this.$message({
          type: 'success',
          message: '保存成功!'
        })
      }
    },
    zoomSize (type) {
      if (type == 1) {
        if (this.nowVal == 50) {
          return
        }
        this.nowVal -= 10
      } else {
        if (this.nowVal == 300) {
          return
        }
        this.nowVal += 10
      }
    }
  }
}
</script>
<style lang="scss" scoped>
*,
:after,
:before {
  box-sizing: border-box;
}
</style>
<style lang="scss">
@import './component/workFlow.css';
.flowBase {
  height: 100%;
  .el-card,
  .el-card__body {
    height: 100%;
  }
}

.fd-nav-content {
  width: 100%;
  // height:calc(100%-100px) ;
  // overflow-x: hidden;
  position: relative;
  overflow-y: auto;
  .dingflow-design {
    width: 100%;
    height: 700px;
    overflow: hidden;
    overflow: scroll;
    background-color: #f5f5f7;
    .release-btn-name {
      text-align: center;
      margin-top: 30px;
      z-index: 100;
      font-size: 30px;
      border: none;
      border-radius: 5px;
    }
    .release-btn-lf {
      position: fixed;
      left: 120px;
      margin-top: 30px;
      z-index: 100;
      color: white;
      background: #409eff;
      border: none;
      border-radius: 5px;
    }
    .release-btn-ri {
      position: fixed;
      left: 250px;
      margin-top: 30px;
      z-index: 100;
      color: white;
      background: #12ad8d;
      border: none;
      border-radius: 5px;
    }
    .keep-div-flowId {
      text-align: center;
      margin-top: 30px;
      z-index: 100;
      font-size: 15px;
      border: none;
      border-radius: 5px;
    }
    .keep-btn {
      position: fixed;
      left: 230px;
      margin-top: 30px;
      z-index: 100;
      width: 80px;
      height: 44px;
      font-size: 1px;
      color: white;
      background: #12ad8d;
      border: none;
      border-radius: 5px;
    }
    .zoom {
      display: flex;
      position: fixed;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: 40px;
      width: 125px;
      right: 50px;
      margin-top: 30px;
      z-index: 10;
      .zoom-out {
        width: 30px;
        height: 30px;
        font-size: 16px;
        background: #fff;
        color: #c1c1cd;
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
        align-items: center;
        background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png);
        .disabled {
          opacity: 0.5;
        }
      }
      .zoom-in {
        width: 30px;
        height: 30px;
        font-size: 16px;
        background: #fff;
        color: #c1c1cd;
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
        align-items: center;
        background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png);
        .disabled {
          opacity: 0.5;
        }
      }
    }
    .end-node {
      border-radius: 50%;
      font-size: 14px;
      color: rgba(25, 31, 37, 0.4);
      text-align: left;
      .end-node-circle {
        width: 10px;
        height: 10px;
        margin: auto;
        border-radius: 50%;
        background: #dbdcdc;
      }
      .end-node-text {
        margin-top: 5px;
        text-align: center;
      }
    }
    .box-scale {
      transform: scale(1);
      display: inline-block;
      position: relative;
      width: 100%;
      height: 100%;
      /* overflow: auto; */
      padding: 54.5px 0;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      min-width: -webkit-min-content;
      min-width: -moz-min-content;
      min-width: min-content;
      background-color: #f5f5f7;
      -webkit-transform-origin: 0 0 0;
      transform-origin: 0 0 0;
    }
    .add-node-btn-box {
      width: 240px;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      position: relative;
    }
    .add-node-btn-box:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      margin: auto;
      width: 1px;
      height: 100%;
      background-color: #cacaca;
    }
    .node-wrap {
      flex-direction: column;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      // padding: 0 50px;
      position: relative;
      display: inline-flex;
      width: 100%;
    }
    .branch-wrap {
      display: inline-flex;
      width: 100%;
    }
    .branch-box-wrap {
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      min-height: 270px;
      width: 100%;
      -ms-flex-negative: 0;
      flex-shrink: 0;
    }
    .branch-box {
      display: flex;
      overflow: visible;
      min-height: 180px;
      height: auto;
      border-bottom: 1px solid #cacaca;
      border-top: 1px solid #cacaca;
      position: relative;
      margin-top: 15px;
      background: #f5f5f7;
    }
    .col-box:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      margin: auto;
      width: 1px;
      height: 100%;
      background-color: #cacaca;
    }
    .add-branch {
      border: none;
      outline: none;
      user-select: none;
      justify-content: center;
      font-size: 12px;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      color: #3296fa;
      background: #fff;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      transform-origin: center center;
      cursor: pointer;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .add-branch:hover {
      transform: translateX(-50%) scale(1.1);
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
    }
    .add-branch:active {
      transform: translateX(-50%);
      box-shadow: none;
    }
    .col-box {
      display: inline-flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      -webkit-box-align: center;
      align-items: center;
      position: relative;
    }
    .condition-node {
      min-height: 220px;
    }
    .condition-node {
      display: inline-flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      -webkit-box-flex: 1;
    }
    .condition-node-box {
      display: inline-flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      -webkit-box-flex: 1;
      padding-top: 30px;
      padding-right: 50px;
      padding-left: 50px;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      flex-grow: 1;
      position: relative;
    }
    .condition-node-box:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 1px;
      height: 100%;
      background-color: #cacaca;
    }
    .auto-judge {
      position: relative;
      width: 220px;
      min-height: 72px;
      background: #fff;
      border-radius: 4px;
      padding: 14px 19px;
      cursor: pointer;
    }
    .auto-judge:after {
      pointer-events: none;
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      border-radius: 4px;
      border: 1px solid transparent;
      transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    }
    .auto-judge.active:after {
      border: 1px solid #3296fa;
      box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
    }
    .auto-judge:active:after {
      border: 1px solid #3296fa;
      box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
    }
    .auto-judge:hover:after {
      border: 1px solid #3296fa;
      box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
    }
    .add-node-btn {
      user-select: none;
      width: 240px;
      padding: 20px 0 32px;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      flex-shrink: 0;
      -webkit-box-flex: 1;
      flex-grow: 1;
      .btn {
        outline: none;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        width: 30px;
        height: 30px;
        background: #3296fa;
        border-radius: 50%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        line-height: 30px;
        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        .iconfont {
          color: #fff;
          font-size: 16px;
        }
      }
      .btn:hover {
        transform: scale(1.3);
        box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
      }
      .btn:active {
        transform: none;
        background: #1e83e9;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
